@import 'theme';
.login-box {
    max-width: 300px;
    margin: 20vh auto 40vh;
    overflow: hidden;
    .login-form {
        position: relative;
        transition: all .5s;
        .input-box {
            padding-top: 70px;
        }
        .input-group {
            input[type="text"],
            input[type="email"],
            input[type="password"] {
                border: none;
                outline: none;
                border-bottom: 1px solid #767676;
            }
            .fa {
                transition: all .5s;
                color: $secondary;
            }
            &.input-focus {
                input {
                    padding-left: 0;
                    padding-right: 30px;
                    border-bottom: 2px solid $headerBg;
                }
                .fa {
                    left: 280px;
                    color: #767676;
                }
            }
            &.error {
                .fa {
                    color: $error;
                }
                input[type="text"],
                input[type="email"],
                input[type="password"] {
                    border-bottom-color: $error;
                }
            }
        }
        .btn {
            background: $secondary;
            color: $headerFg;
            width: 100%;
            margin: 0;
            &:hover {
                background: $headerBg;
            }
        }
        a {
            color: #333;
            text-decoration: none;
        }
        .find-link {
            float: right;
        }
        .other-box {
            line-height: 30px;
            .fa {
                float: right;
                line-height: 30px;
                margin-right: 10px;
                color: $secondary;
            }
        }
        .login-qr-box {
            position: absolute;
            top: 0;
            left: 300px;
            width: 300px;
            text-align: center;
            .qr-box {
                .fa-sync {
                    position: absolute;
                    top: 106px;
                    left: 129px;
                    font-size: 50px;
                    color: $error;
                    display: none;
                }
            }
            .scan-box,
            .success-box,
            .failure-box {
                display: none;
                min-height: 250px;
                .fa {
                    font-size: 80px;
                    margin: 80px 30px 20px;
                }
            }
            .failure-box {
                position: absolute;
                top: 0;
                width: 100%;
                background: rgba(0,0,0,.4);
                color: #fff;
            }
            &.waiting_confirm {
                .scan-box {
                    display: block;
                }
                .qr-box {
                    display: none;
                }
            }
            &.qr_expired {
                .qr-box {
                    .fa-sync {
                        display: block;
                    }
                }
            }
            &.qr_reject {
                .failure-box {
                    display: block;
                }
            }
            &.qr_success {
                .qr-box {
                    display: none;
                }
                .success-box {
                    display: block;
                }
            }
        }
    }
    .login-oauth-box {
        text-align: center;
        margin-top: 20px;
        .box-title {
            border-bottom: 1px solid #767676;
        }
        a {
            font-size: 30px;
            color: $secondary;
            margin: 5px;
        }
    }
    &.slided {
        .login-form {
            transform: translate(-300px, 0);
            min-height: 300px;
        }
    }
}
.footer {
    background: $headerBg;
    color: $headerFg;
    font-weight: 400;
    font-size: 14px;
    padding: 32px 20px;
    position: relative;
    text-align: center;
    a {
        color: $headerFg;
        text-decoration: none;
    }
}

